{% extends 'base.html' %}

{% block title %}创建任务 - 项目管理系统{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto space-y-6">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs" aria-label="面包屑导航">
        <ol class="flex flex-wrap items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ url_for('main.home') }}" class="text-gray-700 hover:text-primary transition-colors">首页</a>
                <i class="fas fa-chevron-right w-4 h-4 mx-2 text-gray-400"></i>
            </li>
            <li class="inline-flex items-center text-primary font-medium">创建任务</li>
        </ol>
    </nav>
    
    <!-- 页面标题 -->
    <h1 class="text-2xl font-bold text-gray-900">创建任务</h1>

    <!-- 表单卡片 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-5 sm:p-6">
            <form method="POST" class="space-y-6">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <!-- 项目选择 -->
                <div>
                    <label for="project_id" class="block text-sm font-medium text-gray-700 mb-1">所属项目 <span class="text-red-500">*</span></label>
                    <select 
                        id="project_id" 
                        name="project_id" 
                        required
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                    >
                        <option value="">请选择项目</option>
                        {% for project in projects %}
                        <option 
                            value="{{ project.id }}" 
                            {% if request.form.project_id and request.form.project_id == project.id %}
                            selected
                            {% endif %}
                        >
                            {{ project.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>

                <!-- 任务名称 -->
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">任务名称 <span class="text-red-500">*</span></label>
                    <input 
                        type="text" 
                        id="name" 
                        name="name" 
                        value="{{ request.form.name or '' }}" 
                        required
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                    >
                </div>

                <!-- 父任务 -->
                <div>
                    <label for="parent_id" class="block text-sm font-medium text-gray-700 mb-1">父任务</label>
                    <select 
                        id="parent_id" 
                        name="parent_id" 
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                    >
                        <option value="0">无（顶级任务）</option>
                        <option value="" disabled>请先选择项目</option>
                    </select>
                </div>

                <!-- 基本信息行 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- 负责人 -->
                    <div>
                        <label for="assignee_id" class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
                        <select 
                            id="assignee_id" 
                            name="assignee_id" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="">请选择负责人</option>
                            {% for user in users %}
                            <option 
                                value="{{ user.id }}" 
                                {% if request.form.assignee_id and request.form.assignee_id == user.id %}
                                selected
                                {% endif %}
                            >
                                {{ user.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- 优先级 -->
                    <div>
                        <label for="priority" class="block text-sm font-medium text-gray-700 mb-1">优先级</label>
                        <select 
                            id="priority" 
                            name="priority" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="低">低</option>
                            <option value="中" selected>中</option>
                            <option value="高">高</option>
                            <option value="紧急">紧急</option>
                        </select>
                    </div>
                    
                    <!-- 状态 -->
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <select 
                            id="status" 
                            name="status" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="未开始" selected>未开始</option>
                            <option value="进行中">进行中</option>
                            <option value="已完成">已完成</option>
                            <option value="已暂停">已暂停</option>
                        </select>
                    </div>
                </div>

                <!-- 日期行 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 开始日期 -->
                    <div>
                        <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
                        <input 
                            type="date" 
                            id="start_date" 
                            name="start_date" 
                            value="{{ request.form.start_date or '' }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                    </div>
                    
                    <!-- 截止日期 -->
                    <div>
                        <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">截止日期</label>
                        <input 
                            type="date" 
                            id="end_date" 
                            name="end_date" 
                            value="{{ request.form.end_date or '' }}"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                    </div>
                </div>

                <!-- 任务描述 -->
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-1">任务描述</label>
                    <textarea 
                        id="description" 
                        name="description" 
                        rows="5" 
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                    >{{ request.form.description or '' }}</textarea>
                </div>

                <!-- 操作按钮 -->
                <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3">
                    <a 
                        href="{{ url_for('main.home') }}" 
                        class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300"
                    >
                        取消
                    </a>
                    <button 
                        type="submit" 
                        class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300"
                    >
                        <i class="fas fa-save mr-2"></i> 创建任务
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // 当项目选择改变时，动态加载父任务选项
    document.getElementById('project_id').addEventListener('change', function() {
        const projectId = this.value;
        const parentTaskSelect = document.getElementById('parent_id');
        
        // 清空当前选项，保留默认选项
        parentTaskSelect.innerHTML = '<option value="0">无（顶级任务）</option>';
        
        if (projectId) {
            // 发送AJAX请求获取项目任务列表
            fetch(`/api/projects/${projectId}/tasks`)
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.tasks) {
                        // 添加任务选项
                        data.tasks.forEach(task => {
                            const option = document.createElement('option');
                            option.value = task.id;
                            option.textContent = task.name;
                            parentTaskSelect.appendChild(option);
                        });
                    } else {
                        // 没有任务时显示提示
                        const option = document.createElement('option');
                        option.value = "";
                        option.textContent = "该项目暂无任务";
                        option.disabled = true;
                        parentTaskSelect.appendChild(option);
                    }
                })
                .catch(error => {
                    console.error('获取任务列表失败:', error);
                    const option = document.createElement('option');
                    option.value = "";
                    option.textContent = "获取任务列表失败";
                    option.disabled = true;
                    parentTaskSelect.appendChild(option);
                });
        } else {
            // 未选择项目时显示提示
            const option = document.createElement('option');
            option.value = "";
            option.textContent = "请先选择项目";
            option.disabled = true;
            parentTaskSelect.appendChild(option);
        }
    });
</script>
{% endblock %}